import {useState, useMemo, memo, useCallback, useEffect, useRef} from "react";
import {Button} from "antd"
import {store} from "../../store"
import "./index.scss"

const Btn = ((props) => {
    const data = {
        count: 0,
        name: "张三"
    }
    const [state, setState] = useState(data);
    const nameRef = useRef(null)
    const changeCount = () => {
        let {count} = state;
        setState({...state, count: count + 1})
    }
    const changeName = (...args) => {
        // setState({...state,name:'李四'})
    }
    useEffect(() => {
        let {count} = state;
        setState({...state, count: count++})
    }, [])

    return (
        <>
            <div>
                <span className="mr10">{state.count}</span>
                <span className="mr10" ref={nameRef}>{state.name}</span>
                <Button className="mr10" type="primary" onClick={changeCount}>加一</Button>
                <Button className="mr10" type="primary" onClick={changeName}>修改名字</Button>
            </div>
        </>
    )
})

const MemoBtn = memo(Btn)
const Hooks = (props) => {
    const [count, setCount] = useState(10)
    const useMemoCount = useMemo(() => ({count}), [count])
    const [name, setName] = useState('小明')
    const changeName = useCallback((val) => {
        setName(val)
    }, [name])
    const add = useCallback(() => {
        setCount(count + 1)
    }, [count])


    const lookBtn = (val) => {
        console.log('--->btnRef val', val)
    }
    const {user}=store.getState()
    return (
        <div>
            <input type="text" value={name} onChange={(e) => changeName(e.target.value)}/>
            <div style={{display: 'flex'}}>
                <MemoBtn {...useMemoCount} add={add} lookBtn={lookBtn}/>
                <Button className="mr10" type="primary" onClick={lookBtn}>查看memoBtn组件</Button>
            </div>
            <br/>
            <hr/>
            <h2>redux使用</h2>
            <div>
                <h3>1.store中的数据</h3>
                <p>姓名：{user.name}</p>
                <p>年龄：{user.age}</p>
            </div>
        </div>
    )
}
export default Hooks

